<template>
    <div id="map" v-for="(cols, rowIndex) in IGameService.map.array" :key="rowIndex">
        <div
            class="cell"
            v-for="(cell, colIndex) in cols" 
            :key="colIndex"
            :class="{
                head: cell.state === State.Head,
                body: cell.state === State.Body,
                tail: cell.state === State.Tail,
                food: cell.state === State.Food
            }"
        >
        <!-- {{ (cell.code != Infinity) ? cell.code : '' }} for debug--> 
        </div>
    </div>
</template>
<script lang="ts" setup>
import { State } from './enum'
import { GameServiceImpl } from './class/GemeServiceImpl.js'
import { useGameStore } from '@/store/modules/game'
import { isEnter, isSpace, isDirection } from '../layout/utils'

const IGameService = new GameServiceImpl()
const gameStore = useGameStore()

watch(() => gameStore.eventCode, (eventCode) => {
    if(isEnter(eventCode)) IGameService.start()
    if(isSpace(eventCode)) IGameService.pause()
    if(isDirection(eventCode)) IGameService.move(eventCode)
})

</script>
<style lang="scss">
#map{
    display: flex;
    .cell{
        border: 1px solid gray;
        width: 30px;
        height: 30px;
    }
    .head{
        background-color: red;
    }
    .body{
        background-color: green;
    }
    .tail{
        background-color: blue;
    }
    .food{
        background-color: yellow;
    }
}
</style>